<template>
  <div class="progress-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="progress-card bg-white rounded-lg shadow-xl p-8 max-w-md w-full mx-4">
      <!-- 图标和标题 -->
      <div class="text-center mb-6">
        <div class="progress-icon mx-auto mb-4">
          <div
            class="icon-wrapper rounded-full flex items-center justify-center"
            :class="iconClass"
          >
            <svg v-if="type === 'uploading'" class="w-8 h-8 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
            </svg>
            <svg v-else-if="type === 'transcribing'" class="w-8 h-8 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
            </svg>
            <svg v-else-if="type === 'generating'" class="w-8 h-8 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ title }}</h3>
        <p class="text-gray-600 text-sm">{{ description }}</p>
      </div>

      <!-- 进度条 -->
      <div class="mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-sm font-medium text-gray-700">进度</span>
          <span class="text-sm font-medium text-blue-600">{{ progress }}%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
          <div
            class="progress-bar h-full rounded-full transition-all duration-500 ease-out"
            :class="progressBarClass"
            :style="{ width: progress + '%' }"
          >
            <div class="progress-shine"></div>
          </div>
        </div>
      </div>

      <!-- 详细状态 -->
      <div class="status-details mb-6">
        <div class="flex items-center justify-between text-sm">
          <span class="text-gray-500">{{ statusText }}</span>
          <span class="text-gray-700 font-medium">{{ timeElapsed }}</span>
        </div>
      </div>

      <!-- 步骤指示器 -->
      <div class="steps-indicator mb-6">
        <div class="flex items-center justify-between">
          <div
            v-for="(step, index) in steps"
            :key="index"
            class="step-item flex flex-col items-center"
            :class="getStepClass(index)"
          >
            <div class="step-circle flex items-center justify-center rounded-full border-2 transition-all duration-300">
              <svg v-if="step.completed" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
              </svg>
              <span v-else class="text-xs font-medium">{{ index + 1 }}</span>
            </div>
            <span class="step-label text-xs mt-1">{{ step.name }}</span>
          </div>
        </div>
      </div>

      <!-- 取消按钮 -->
      <div class="flex justify-center">
        <button
          @click="$emit('cancel')"
          class="px-6 py-2 text-gray-600 hover:text-gray-800 transition-colors duration-200 text-sm font-medium"
        >
          取消操作
        </button>
      </div>

      <!-- 预计剩余时间 -->
      <div v-if="estimatedTime" class="mt-4 text-center">
        <p class="text-xs text-gray-500">
          预计剩余时间: {{ estimatedTime }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'

interface Step {
  name: string
  completed: boolean
}

interface Props {
  type: 'uploading' | 'transcribing' | 'generating'
  title: string
  description: string
  progress: number
  steps?: Step[]
  estimatedTime?: string
}

const props = withDefaults(defineProps<Props>(), {
  steps: () => [],
  estimatedTime: ''
})

defineEmits<{
  cancel: []
}>()

const startTime = ref(Date.now())
const currentTime = ref(Date.now())
let timer: NodeJS.Timeout | null = null

onMounted(() => {
  timer = setInterval(() => {
    currentTime.value = Date.now()
  }, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

const timeElapsed = computed(() => {
  const elapsed = Math.floor((currentTime.value - startTime.value) / 1000)
  const minutes = Math.floor(elapsed / 60)
  const seconds = elapsed % 60
  return `${minutes}:${seconds.toString().padStart(2, '0')}`
})

const iconClass = computed(() => {
  switch (props.type) {
    case 'uploading':
      return 'bg-blue-100 text-blue-600'
    case 'transcribing':
      return 'bg-purple-100 text-purple-600'
    case 'generating':
      return 'bg-green-100 text-green-600'
    default:
      return 'bg-gray-100 text-gray-600'
  }
})

const progressBarClass = computed(() => {
  switch (props.type) {
    case 'uploading':
      return 'bg-blue-500'
    case 'transcribing':
      return 'bg-purple-500'
    case 'generating':
      return 'bg-green-500'
    default:
      return 'bg-gray-500'
  }
})

const statusText = computed(() => {
  switch (props.type) {
    case 'uploading':
      return props.progress < 100 ? '正在上传音频文件...' : '上传完成'
    case 'transcribing':
      return props.progress < 100 ? '正在进行语音识别...' : '转录完成'
    case 'generating':
      return props.progress < 100 ? '正在生成会议纪要...' : '纪要生成完成'
    default:
      return '处理中...'
  }
})

const getStepClass = (index: number) => {
  const step = props.steps[index]
  return {
    'step-completed': step.completed,
    'step-current': index === props.steps.findIndex(s => !s.completed),
    'step-pending': !step.completed && index !== props.steps.findIndex(s => !s.completed)
  }
}
</script>

<style scoped>
.progress-overlay {
  backdrop-filter: blur(4px);
}

.progress-card {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.progress-bar {
  position: relative;
  overflow: hidden;
}

.progress-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.step-circle {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.step-completed .step-circle {
  background-color: #10b981;
  border-color: #10b981;
  color: white;
}

.step-current .step-circle {
  border-color: #3b82f6;
  color: #3b82f6;
  background-color: #eff6ff;
}

.step-pending .step-circle {
  border-color: #d1d5db;
  color: #9ca3af;
}

.step-label {
  max-width: 60px;
  text-align: center;
  word-wrap: break-word;
}

.step-completed .step-label {
  color: #10b981;
}

.step-current .step-label {
  color: #3b82f6;
  font-weight: 500;
}

.step-pending .step-label {
  color: #9ca3af;
}
</style>